<!-- 弹窗组件 Dialog.vue -->
<template>
  <div>
    <el-drawer
      class="message-drawer"
      :visible.sync="drawer"
      :show-close="false"
      :with-header="false"
      :modal="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      size="25%">
      <el-row class="row-body" :class="noticeM">
        <div class="message-drawer-header">
          <el-tabs v-model="activeName" @tab-click="handleTabsClick">
            <el-tab-pane :label="tabLabel" name="first" />
            <el-tab-pane :label="tabLabel2" name="second" />
          </el-tabs>
        </div>
        <div class="message-drawer-body">
          <div
            v-if="bacdDisabled"
            style="
              font-size: 80px;
              color: #cccccc;
              text-align: center;
              margin-top: 30px;">
            <el-image
              style="width: 112px; height: 122px"
              :src="require('@/framework/assets/empty__image@2x.png')" />
            <p style="padding: 0; margin: 0; font-size: 14px">暂无新消息</p>
          </div>
          <div
            v-for="(item, index) in dataList"
            v-else
            :key="index">
            <div class="message-list-item">
              <!-- <div class="bell">
                <i class="el-icon-bell" />
              </div> -->
              <div class="bell_main">
                <div class="item-title" style="color: #666">
                  <div>
                    {{ item.sendUserName + item.sendUserId }}
                  </div>
                </div>
                <div class="item-msg" style="color: #666">
                  信息：{{ item.msg }}
                </div>
                <div class="item-time">{{ item.sendTime }}</div>
              </div>
              <div v-if="activeName=='first'" class="bell_button">
                <el-button 
                  type="primary"
                  @click="handleAccess(item)">接入</el-button>
              </div>
              <div v-else class="bell_button">
                <el-button 
                  type="primary"
                  @click="handleAccessZj(item)">转接接入</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </el-drawer>
    <!-- 客服聊天窗 -->
    <el-dialog class="chat-dialog" :visible.sync="open" width="900px" :before-close="handleClose"
      :append-to-body="true" >
      <chatDialog :chatGroupEntity="groupItem" ref="chatDialogRef" />
    </el-dialog>
  </div>
</template>

<script>
// 客服聊天组件
import chatDialog from '@/components/chat/chat_kf.vue'
import store from "@/store";
// 客服消息
import {
  listAccessInfo,
  getAccessInfo,
  delAccessInfo,
  addAccessInfo,
  updateAccessInfo,
  getAccessInfoApi,
  getAccessInfoList,
  revokeAccessInfoApi,
  getAccessInfoAllocationApi
} from "../../api/accessInfo/AccessInfo";
// 游客用户关联信息
import {
  listTouristUser,
  getTouristUser,
  delTouristUser,
  addTouristUser,
  updateTouristUser,
  getTouristInfo
} from "../../api/touristUser/TouristUser";
// 转接信息
import {
  listSwitchGroupInfo, 
  getSwitchGroupInfo, 
  delSwitchGroupInfo, 
  addSwitchGroupInfo, 
  updateSwitchGroupInfo,
  allocationSwitchInfoApi,
  getChatSwitchGroupInfoApi
} from "../../api/switchGroupInfo/SwitchGroupInfo";
import { dealRouter } from '@/framework/utils/menu'
export default {
  name: 'DtMessageListChat',
  components: { chatDialog },
  props: {},
  data() {
    return {
      drawer: false,
      open: false,
      appt: true,
      activeName: 'first',
      participantList: [],
      dataList: [],
      bacdDisabled: false,
      foot: 'foot',
      noticeM: 'noticeM',
      tabLabel: '接入消息（0）',
      tabLabel2: '转接消息（0）',
      dialogFormVisible: false,
      ruleForm: {},
      groupItem: {},
      queryParams: {
        pageNo: 1,
        pageSize: 30,
        userId: store.state.user.userId,
        switchFlag: "N"
      }
    }
  },
  watch: {
    visible(data) {
      this.dialogVisible = data
    }
  },
  inject: [
    'reload'
  ],
  methods: {
    initData() {
      this.drawer = true
      this.getUnList()//获取接入信息了表
      this.getMyPlatNotice()//获取转接信息列表
      this.activeName = 'first'
    },
    // 获取接入信息列表
    getUnList() {
      getAccessInfoList().then(res => {
        // console.log("接入信息=",res)
        if (res.code == "00000") {
          this.messageNum = res.data.length
          if (this.activeName == 'first') {
            this.dataList = res.data
          }
          this.tabLabel = '接入消息（' + res.data.length + '）'
          this.openedDraw()
        }
      })
      .catch(err => {
        console.log("出错了",err)
        this.tabLabel = '接入消息（0）'
      })
    },
    // 获取转接信息列表
    getMyPlatNotice() {
      let dataParams = {
        userId: store.state.user.userId,
        switchFlag: "N",
      };
      getChatSwitchGroupInfoApi(dataParams).then(res => {
        // console.log("res=",res)
        this.messageNum = res.data.length
          if (this.activeName == 'second') {
            this.dataList = res.data
          }
          this.tabLabel2 = '转接消息（' + res.data.length + '）'
          this.openedDraw()
      })
      .catch(err => {
        console.log("出错了",err)
        this.tabLabel2 = '转接消息（0）'
      })
    },
    openedDraw() {
      if (this.dataList.length === 0) {
        this.noticeM = 'noticeNone'
        // this.foot = 'foot'
        this.bacdDisabled = true
      } else {
        this.bacdDisabled = false
        this.noticeM = 'noticeM'
        this.foot = 'footer'
      }
      this.$forceUpdate()
    },
    // 切换选项卡
    handleTabsClick(tab, event) {
      this.dataList = []
      if (tab.name == 'second') {
        this.getMyPlatNotice()
      } else {
        this.getUnList()
      }
    },
    // 接入信息操作
    handleAccess(data){
      console.log("参数=",data)
      getAccessInfoAllocationApi({ sendUserId: data.sendUserId }).then(res => {
        console.log("接入结果=",res)
        // 拿到groupId,当做参数传递到游客弹窗子组件中
        //子组件通过groupId获取聊天信息走正常的内部聊天
        if (res.code == "00000") {
          this.groupItem = res.data
          this.open = true;
        }
      }).catch(err => {
        this.$message.error('出错了，请联系管理员！');
      })
    },
    // 转接操作
    handleAccessZj(item){
      allocationSwitchInfoApi({groupId:item.groupId}).then(res => {
        console.log("转接结果=",res)
        if(res.code == "00000"){
          this.groupItem = res.data;
          this.open = true;
        }
      }).catch(err => {
        this.$message.error("出错了，请联系管理员！")
      })
    },
    // 弹窗关闭确认
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          // 关闭弹窗重新获取接入数据
          if (this.activeName == 'first') {
            this.getUnList()
          } else {
            // 重新获取转接数据
            this.getMyPlatNotice()
          }
          
        })
        .catch(_ => {});
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/framework/styles/variables.scss";
::v-deep  .el-drawer__open .el-drawer.rtl {
    // height: 92.5%;
    // margin-top: 51px !important;

  }
.message-drawer {
   ::v-deep .el-drawer__body {
    display: flex;
    overflow: hidden;
    flex-direction: column;
      .row-body {
          // height: 90%;
          display: flex;
          flex-direction: column;
          flex: 1;
          overflow-y: auto;
            .message-drawer-header {
              display: flex;
              height: 56px;
              line-height: 56px;
              padding: 0 16px;
              border-bottom: 1px solid #dcdfe6;
              ::v-deep .el-tabs {
                .el-tabs__header {
                  margin: 0;
                }
                .el-tabs__nav-wrap::after {
                  display: none;
                }
                .el-tabs__active-bar {
                  display: none;
                }
                .el-tabs__item {
                  // padding: 0 10px;
                }
              }
            }
            .message-drawer-body {
              flex: 1;
              overflow-y: auto;
              .message-list-item {
                display: flex;
                padding: 6px 3px;
                height: 80px;
                position: relative;
                border-bottom: 1px solid #e8e8e8;
                cursor: pointer;
                  // overflow-y: auto;
                .bell {
                  width: 50px;
                  height: 50px;
                  float: left;
                  color: #fff;
                  background: #dd4b39;
                  & > i {
                    margin: 10px;
                    font-size: 30px;
                  }
                }
                .bell_main {
                  margin-left: 10px;
                  // height: 24px;
                  .item-title {
                    width: 100%;
                    height: 23px;
                    -webkit-line-clamp: 1;//显示1行，控制显示的行数
                    -webkit-box-orient: vertical;
                    font-weight: 600;
                    line-height: 24px;
                    font-size: 14px;
                    color: #131314;
                  }
                  .item-msg {
                    width: 100%;
                    height: 23px;
                    overflow: hidden;//超出的文本隐藏
                    text-overflow: ellipsis;//溢出用省略号
                    display: -webkit-box;
                    -webkit-line-clamp: 1;//显示1行，控制显示的行数
                    -webkit-box-orient: vertical;
                    font-weight: 600;
                    line-height: 24px;
                    font-size: 14px;
                    color: #131314;
                  }
                  .item-time {
                    font-size: 12px;
                    color: #8f9299;
                    line-height: 20px;
                  }
                }
                .bell_button {
                  margin: auto;
                }
              }
            }

        }
         .message-drawer-footer {
              height: 56px;
              line-height: 56px;
              padding: 0 16px;
              border-top: 1px solid #dcdfe6;
              text-align: center;
            }
  }

}
.message-detail{
  .message-body{
    display: flex;
    flex-direction: column;
    min-height: 490px;
    .title{
      text-align: center;
      // margin-top: 24px;
      margin-bottom: 8px;
      font-size: 18px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      font-weight: 500;
      color: #131314;
      line-height: 24px;
    }
    .des{
      display: flex;
      line-height: 24px;
      border-bottom: 1px solid #D8D8D8;
      font-size: 12px;
       color: #606266;
       padding-bottom: 4px;
       margin-bottom: 24px;
      .level{
      }
    }
  }
}
// 客服聊天
.chat-dialog ::v-deep .el-dialog {
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__header {
    display: none;
  }
}

</style>
